<template>
  <div class="id">
    <img class="BeiJing" src="../../img/首页/u19.png" alt />
    <!-- 头部 -->
    <div class="head">
      <span @click="Exit">
        <van-icon name="arrow-left" />
      </span>
      <span>每日签到</span>
    </div>
    <!-- 日历 -->
    <div class="Cascading1"></div>
    <div class="Cascading2"></div>
    <div class="Calendar">
      <van-calendar
        class="Cale"
        :show-subtitle="true"
        :show-title="false"
        title="日历"
        :poppable="false"
        :show-confirm="false"
        :row-height="50"
        :show-mark="true"
        :style="{ height: '300px' }"
        :formatter="formatter"
        :readonly="true"
        :default-date="null"
      />
    </div>
    <!-- 下面的背景图片 -->
    <div class="Images">
      <img src="../../img/首页/u1065.png" alt />
      <img src="../../img/首页/u1115.png" alt />
      <img src="../../img/首页/u1116.png" alt />
    </div>
    <!-- 点击签到 -->
    <div class="SignIn" @click="QianDao">
      <span>{{ signInStore.Number}}次</span>
      <br />
      <span>{{Title }}</span>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";
import { ref } from "vue";
import { newTime } from "../../components/Method";
import { useSignInStore } from "../../stores/signIn.js";
const signInStore = useSignInStore();
const Title = ref("今日未签到");
const todayMonth=newTime('MM')
const todayDate=newTime('DD')
const formatter = day => {
  const month = day.date.getMonth() + 1;
  const date = day.date.getDate();
  signInStore.items.forEach(item => {
    const smonth = item.sdate.substr(5, 2);
    const sdate = item.sdate.substr(8, 2);
    if (month == smonth) {
      if (date == sdate) {
        day.className = "active111";
      }
    }
    if(smonth==todayMonth){
      if(sdate==todayDate){
        Title.value='签到成功'
      }
    }
  });
  return day;
};

// 激活路由
const router = useRouter();
// 激活活跃路由
const route = useRoute();
// 点击返回
const Exit = () => {
  router.go(-1);
};
// 点击签到
const Number = ref(0);
const QianDao = () => {
  const date = new Date();
  signInStore.updateInfo(date);
};
function fun() {
  if (route.path === "/everyday") {
    signInStore.getInfo();
  }
}
fun();
</script>

<style lang="less" scoped>
.BeiJing {
  width: 100%;
}
.head {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 20px;
  color: #ffffff;
  span:nth-of-type(1) {
    margin-right: 10px;
  }
}
.Calendar {
  box-shadow: 0px 2px 10px rgb(51 51 51 / 35%);
  position: absolute;
  top: 90px;
  left: 20px;
  right: 20px;
  height: 300px;
  border-radius: 10px;
  .Cale {
    border-radius: 10px;
  }
}
.Cascading1 {
  box-shadow: 0px 2px 10px rgb(51 51 51 / 35%);
  position: absolute;
  top: 105px;
  left: 20px;
  right: 20px;
  height: 300px;
  border-radius: 10px;
}
.Cascading2 {
  box-shadow: 0px 2px 10px rgb(51 51 51 / 35%);
  position: absolute;
  top: 120px;
  left: 20px;
  right: 20px;
  height: 300px;
  border-radius: 10px;
}
.Images {
  img:nth-of-type(2) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  img:nth-of-type(1) {
    position: absolute;
    bottom: 20.667vw;
    width: 100%;
    left: 0;
  }
  img:nth-of-type(3) {
    position: absolute;
    bottom: 1.633vw;
    width: 100%;
    left: 0;
  }
}
.SignIn {
  position: absolute;
  bottom: 17vw;
  left: 37%;
  span:nth-of-type(1) {
    display: block;
    padding: 8.333vw;
    background-color: rgba(62, 210, 226, 1);
    border-radius: 50%;
    font-size: 6.333vw;
    color: #ffff;
  }
  span:nth-of-type(2) {
    display: block;
    background-color: rgba(255, 94, 129, 1);
    border-radius: 3.333vw;
    position: absolute;
    bottom: 2.667vw;
    width: 33.333vw;
    text-align: center;
    color: #fff;
    right: -14.9px;
  }
}
</style>
